import React, { Component } from "react";
import HignLoginFormSet from "@containers/HignLoginFormSet";
import { Message, Container, Divider } from "semantic-ui-react";

function FooterListItem(props) {
  const listStyleNoneLI = {
    marginRight: "16px"
  };
  return (
    <li style={listStyleNoneLI}>
      <a href="#">{props.value}</a>
    </li>
  );
}
function FooterList(props) {
  const listStyleNoneUl = {
    listStyleType: "none",
    display: "flex",
    justifyContent: "center",
    marginBottom: 0,
    marginTop: "20px",
    paddingLeft: 0,
    paddingTop: "20px"
  };
  const content = props.content;
  const listItems = content.map((value, index) => (
    <FooterListItem key={index.toString()} value={value} />
  ));
  return (
    <Container className="footer">
      <ul style={listStyleNoneUl}>
        {listItems}
        <li>
          <a href="#" className="link-gray">
            关于 Tquery
          </a>
        </li>
      </ul>
    </Container>
  );
}

class LoginCard extends Component {
  render() {
    const footer = ["团队", "私人", "安全"];
    // 未添加响应式

    return (
      <div>
        <HignLoginFormSet />
        <Divider />
        <Message style={{ textAlign: "center" }}>
          <span style={{ marginRight: "3px" }}>初次登陆 Tuery?</span>
          <a href="#">创建一个账户.</a>
        </Message>
        <FooterList content={footer} />
      </div>
    );
  }
}
export default LoginCard;
